const path = require("path");
// 引入html 插件
const HTMLWebpackPlugin = require("html-webpack-plugin");

// 引入clean插件
const { CleanWebpackPlugin } =  require("clean-webpack-plugin");

// webpack 的配置
module.exports = {
    // 指定入口文件
    entry: "./src/app.ts",

    // 打包输出
   
    output:{
        path: path.resolve(__dirname, "dist"),
        filename: "index.js",

        environment: {
            arrowFunction: false,
            const: false,
        }
    },
    // 打包使用的模块
    module:{
        
        rules:[{
            test: /\.ts/,
            use: "ts-loader",
            exclude: /node-modules/
        },
        {
            test: /\.less$/,
            use: [
                "style-loader",
                "css-loader",
                "postcss-loader",
                // {
                //     loader: "postcss-loader",
                //     options: {
                //         postcssOptions: {
                //             plugins: [
                //                 [
                //                     "postcss-preset-env",
                //                     {
                //                         browsers: 'last 2 versins'
                //                     }
                //                 ]
                //             ]
                //         }
                //     }
                // },
                "less-loader"
            ]
        }]
    },
    // 配置webpack插件
    plugins: [
        // 这样打包出html文件  这个是要用到html-webpack-plugin插件
        new HTMLWebpackPlugin({
            // 打包出 的html 的模板
            template: "./src/index.html"
        }),
        new CleanWebpackPlugin()
    ],

    resolve: {
        extensions: ['.ts','.js']
    }
}